<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/crm/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/crm/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/static/crm/css/public.css" media="all">
    <style>

    </style>

</head>
<body>
<div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
        <li class="layui-this">合同审批</li>
        <li>回款审批</li>
        <li>发票审批</li>

    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show"><table id="demo" lay-filter="test1"></table></div>
        <div class="layui-tab-item"><table id="demo2" lay-filter="test2"></table></div>
        <div class="layui-tab-item"><table id="demo3" lay-filter="test3"></table></div>
    </div>
</div>
<!--编辑删除添加按钮-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" lay-event="del">取消</button>
        <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" lay-event="audit">审核</button>
    </div>
</script>

<!--点击刷新按钮-->
<script type="text/html" id="shuax">
    <div class="layui-btn-container">
        <button class="layui-icon layui-icon-refresh-3 layui-btn layui-btn-sm"></button>
    </div>
    <div>

        <form action="#" method="post" class="layui-form">
            <input type="text" placeholder="搜索" autocomplete="off" style="width: 200px;">
        </form>

    </div>
</script>
<script type="text/html" id="fapiao">
    <div  class="layui-btn-container">
        <button class=" layui-btn layui-btn-normal layui-btn layui-btn-xs" lay-event="add">新增发票</button>
    </div>
</script>
<script src="/static/crm/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/static/crm/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/static/crm/lib/layui-v2.6.3/layui.js"></script>
<script>
    layui.use(['form', 'table','layer','jquery'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer;

        //定义顶端新增数据监听
        table.on('toolbar(test3)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            if (obj.event === 'add') {
                layer.open({
                    type: 2,
                    area: ['1000px','500px'],
                    content: 'backlog/add'
                })
            }
        })

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 250
            ,toolbar: '#shuax'
            ,url: '/crm/backlog.backlog/one' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'number', title: '合同编号', width:100}
                ,{field: 'name', title: '合同名称', width:100}
                ,{field: 'client_id', title: '客户名称', width:100}
                ,{field: 'money', title: '合同金额', width: 100}
                ,{field: 'price', title: '产品价格', width: 100, sort: true}
                ,{field: 'remark', title: '备注', width: 80}
                ,{field: 'start_time', title: '开始时间', width: 100}
                ,{field: 'end_time', title: '结束时间', width: 100}
                ,{field: 'sale_id', title: '签约人', width:80}
                ,{field: 'create_time', title: '创建时间', width:100}
                ,{field: 'status', title: '状态', width:80}
                ,{ title: '操作', width:100,toolbar: '#toolbarDemo',fixed:'right'}
            ]]
        });
        //第一个实例删除见
        table.on('tool(test1)',function(obj){

            // console.log(obj)
            layer.confirm('确定取消要合同名称为'+obj.data.name+'的合同', function(index) {
                //向服务端发送删除指令
                $.ajax({
                    type:'POST',
                    url:'crm/backlog.backlog/del',
                    data:'id='+obj.data.id,
                    dataType: 'json',
                    success: function (result) {
                        if(result === '删除成功'){
                            layer.msg(result);
                            //删除对应行（tr）的DOM结构，并更新缓存
                            obj.del();
                            layer.close(index);
                            table.reload('table')
                        }else{
                            layer.msg(result);
                            return false;
                        }
                    },
                    error: function () {
                        layer.msg('操作失败！！！');
                    }
                })
            })
        })
            //第二个示例
        table.render({
            elem: '#demo2'
            ,height: 250
            ,toolbar: '#shuax'
            ,url: '/crm/backlog.backlog/two' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'number', title: '回款编号', width:100}
                ,{field: 'money', title: '回款金额', width:100}
                ,{field: '', title: '合同编号', width:100}
                ,{field: '', title: '合同名称', width: 100}
                ,{field: 'client_id', title: '客户名称', width: 100}
                ,{field: '', title: '合同金额', width: 100}
                ,{field: 'remark', title: '备注', width: 80}
                ,{field: '', title: '签约人', width:80}
                ,{field: 'create_time', title: '创建时间', width:100}
                ,{field: 'wealth', title: '状态', width:80}
                ,{ title: '操作', width:100,toolbar: '#toolbarDemo',fixed:'right'}
            ]]
        });
        //第二个实例删除按钮
        table.on('tool(test2)',function(obj){
            if(obj.event === 'audit'){
                        console.log(obj)
                            layer.open({
                            type: 2,
                            area: ['500px','600px'],
                            content: ''
                        })

            }else if( obj.event === 'del' ){
                layer.confirm('确定取消要回款编号为'+obj.data.number+'的的记录吗', function(index) {
                    //向服务端发送删除指令
                    $.ajax({
                        type:'POST',
                        url:'backlog/del2',
                        data:'id='+obj.data.id,
                        dataType: 'json',
                        success: function (result) {
                            if(result === '删除成功'){
                                layer.msg(result);
                                //删除对应行（tr）的DOM结构，并更新缓存
                                obj.del();
                                layer.close(index);
                                table.reload('table')
                            }else{
                                layer.msg(result);
                                return false;
                            }
                        },
                        error: function () {
                            layer.msg('操作失败！！！');
                        }
                    })
                })
            }

        })
            //第三个示例
        table.render({
            elem: '#demo3'
            ,height: 250
            ,toolbar: '#fapiao'
            ,url: 'table' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'money', title: '发票金额', width:100}
                ,{field: 'subject', title: '开票主体', width:100}
                ,{field: 'title', title: '发票抬头类型', width: 100}
                ,{field: 'type', title: '发票类型', width: 100}
                ,{field: 'code', title: '统一社会信用代码', width: 150}
                ,{field: 'email', title: '接收邮箱', width: 100}
                ,{field: 'person', title: '收件人', width: 100}
                ,{field: 'phone', title: '收件手机', width:100}
                ,{field: 'address', title: '邮寄地址', width:100}
                ,{field: 'remark', title: '备注', width:80}
                ,{field: 'create_time', title: '创建时间', width:100}
                ,{field: 'update_time', title: '创建时间', width:100}
                ,{field: 'status', title: '审核状态', width:100}
                ,{ title: '操作', width:100,toolbar: '#toolbarDemo',fixed:'right'}
            ]]
        });

        //第三个实例删除按钮
        table.on('tool(test3)',function(obj){
            layer.confirm('确定取消要发票id为'+obj.data.id+'的的记录吗', function(index) {
                //向服务端发送删除指令
                $.ajax({
                    type:'POST',
                    url:'backlog/del3',
                    data:'id='+obj.data.id,
                    dataType: 'json',
                    success: function (result) {
                        if(result === '删除成功'){
                            layer.msg(result);
                            //删除对应行（tr）的DOM结构，并更新缓存
                            obj.del();
                            layer.close(index);
                            table.reload('table')
                        }else{
                            layer.msg(result);
                            return false;
                        }
                    },
                    error: function () {
                        layer.msg('操作失败！！！');
                    }
                })
            })
        })

    });
</script>

</body>
</html>